<template>
  <div class="realizeBox">
    <div class="accC1Box flex f-s">
      <img
        class="accC1Img"
        src="../../../../assets/zfc/个人中心/我的账号/橙子.png"
        alt=""
      />
      <div class="accC1Text1Box flex f-s">
        <span class="f18 c6">您好，</span>
        <span class="f18 cR">{{ sjId }}</span>
      </div>
      <div class="accC1Text2Box flex">
        <span class="f18 c25 l-h-48">当前积分</span>
        <span class="f18 cC l-h-48">124</span>
      </div>
      <div class="accC1Text3Box flex">
        <span class="f18 c25 l-h-48 c-p" @click="goBill()">我的钱包</span>
        <span class="f18 cC l-h-48 c-p" @click="goBill()">¥1220.0</span>
      </div>
      <div class="accC1Text4Box flex">
        <span class="accC1Text4T1 f18 l-h-48">充值有礼>></span>
        <span class="accC1Text4T2 f18 l-h-48" @click="goExchange()">充值卡兑换>></span>
      </div>
    </div>
    <div class="accC2Box">
      <img
        class="accC2Img"
        src="../../../../assets/zfc/个人中心/我的账号/底部广告图.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "myAccountUI",
  data() {
    return {
      sjId: "136****2356",
    };
  },
  methods: {
    goExchange() {
      this.$router.push({ name: "Exchange" });
    },
    goBill() {
      this.$router.push({ name: "Bill" });
    },
  },
};
</script>

<style scoped>
* {
  font-size: 0;
  color: #333333;
}
.realizeBox {
  width: 100%;
}
.f-s {
  justify-content: flex-start;
}
.f-e {
  justify-content: flex-end;
}
.f18 {
  font-size: 18px;
}
.f16 {
  font-size: 16px;
}
.f14 {
  font-size: 14px;
}
.c6 {
  color: #666666;
}
.c9 {
  color: #999999;
}
.c25 {
  color: #252525;
}
.cR {
  color: #e85e35;
}
.cC {
  color: #f08200;
}
.l-h-48 {
  line-height: 48px;
}
.c-p {
  cursor: pointer;
}
</style>

<style scoped>
.accC1Box {
  width: 1083px;
  height: 219px;
  margin-bottom: 20px;
  background-color: #f4fff2;
  border: 1px solid #e7e7e7;
}
.accC1Img {
  margin-left: 40px;
  margin-right: 40px;
}
.accC1Text1Box {
  width: 340px;
  height: 100%;
}
.accC1Text2Box,
.accC1Text3Box,
.accC1Text4Box {
  width: 153px;
  height: 100%;
  flex-direction: column;
}
.accC1Text4Box {
  width: 150px;
  margin-left: 40px;
  align-items: flex-start;
}
.accC1Text4T1 {
  color: #4b943d;
  cursor: pointer;
}
.accC1Text4T2 {
  color: #f08200;
  cursor: pointer;
}
.accC2Box {
  width: 1083px;
  height: 382px;
  border: 1px solid #e7e7e7;
}
.accC2Img {
  margin: 1px 1px;
}
</style>
